<template>
  <div class="container">
    <Headbar />
    <!-- <Hungbar/> -->
    <HeadMenu  :info="info" />
    <NavList  v-if="info && goodsClassify" index="list" :factoryId="info.id" :classify="goodsClassify" />
    <div class="search-main">
      <div class="search-result">
        <div class="search-conditions">
          <el-breadcrumb separator-class="el-icon-arrow-right" v-if="haveClassify">
            <el-breadcrumb-item>所有结果</el-breadcrumb-item>
            <el-breadcrumb-item>
              <el-select v-model="defaultClassify" filterable :placeholder="defaultClassify" @change="changeClassify">
                <el-option
                  v-for="item in classifyList"
                  :key="item.classifyId"
                  :label="item.classifyName"
                  :value="item.classifyId">
                </el-option>
              </el-select>
            </el-breadcrumb-item>

            <el-select v-model="defaultSecondClassify" filterable :placeholder="defaultSecondClassify">
              <el-option
                v-for="item in secondClassifyList"
                :key="item.classifyId"
                :label="item.classifyName"
                :value="item.classifyId">
              </el-option>
            </el-select>
            <span class="product-total">共 {{total}} 件商品</span>
          </el-breadcrumb>
        </div>
      </div>

      <div class="search-bar" style="margin-top: 20px">
        <div class="search-options-ul">
          <div :class="sortByActive == 0?'search-ops-li search-ops-li-active':'search-ops-li'" @click="sortTab(0)">
            综合排序
          </div>
          <!--<div :class="sortByActive == 1?'search-ops-li search-ops-li-active':'search-ops-li'" @click="sortTab(1)">销量
            <img src="../../assets/images/search/search_15.png">
          </div>-->
          <div :class="sortByActive == 2?'search-ops-li search-ops-li-active':'search-ops-li'" @click="sortTab(2)">新款
          </div>
          <div :class="sortByActive == 3?'search-ops-li search-ops-li-active':'search-ops-li'"
               @click="sortByPrice();sortTab(3)">
            价格
            <div :class="'triangle-icon '+ triangleStatus">
              <div class="triangle triangle-up"></div>
              <div class="triangle triangle-bottom"></div>
            </div>
          </div>
          <!--<div class="search-ops-li price-area">
            ￥<input class="search_input" v-model="listQuery.minPrice" type="text" placeholder="最低价">
            - <input class="search_input" v-model="listQuery.maxPrice" type="text" placeholder="最高价">
          </div>-->
        </div>
      </div>

      <div class="search-products">
        <div class="search-pd-content">

          <div class="search-list" v-for="(item,index) in productList" :key="index">
            <nuxt-link :to="{name:'product-id',params: { id: item.productId }}" target="_blank">
              <img class="search-pd-img" :src="URL.PIC+item.productImage" :alt="item.productTitle+','+info.factoryName">
              <p class="search-pd-title">
                {{ item.productTitle }}
              </p>
              <div class="search-price" v-if="item.specification">￥{{ item.specification.sellingPrice }}</div>
            </nuxt-link>
          </div>


          <div v-if="productList && productList.length == 0">
            <div class="search-null tcenter">
              <img src="../../../assets/images/member/notnull.png" class="search-nullImg">
              <p class="search-null-text">暂无内容哦~</p>
            </div>
          </div>
        </div>
      </div>
      <Pagination v-show="total>0" :total="total" layout="prev, pager, next, total, jumper" :page.sync="listQuery.page" :limit.sync="listQuery.size"
                  @pagination="getList"/>
    </div>
    <Footbars />
  </div>
</template>
<script>
import Headbar from '@/components/Layouts/Headbar'
import Footbars from '@/components/Layouts/Footbars'
import HeadMenu from '../../factory/components/HeadMenu'
import NavList from '../../factory/components/NavList'
import Pagination from '@/components/Pagination'
import Hungbar from '@/components/Layouts/Hungbar'
import { getFactoryInfo, getFactoryClassify } from '@/api/factory'
import { storeProductList, storeFrontClassifyList } from '@/api/product'

export default {
  name: 'PDList',
  components: {
    Headbar,
    HeadMenu,
    Footbars,
    NavList,
    Pagination,
    Hungbar
  },
  data() {
    return {
      productList: null,
      triangleStatus: '',
      pageSizes: [50],
      listQuery: {
        factoryId: this.$route.params.factoryId,
        classifyId: this.$route.query.classifyId ? this.$route.query.classifyId: '',
        size: 50,
        page: 1,
        fieldSort: null,
        sort: null,
        title: null,
        // title: this.getUrlParams('kw')
      },
      total: 0,
      haveClassify: false,
      classifyList: null,
      defaultClassify: null,
      secondClassifyList: null,
      defaultSecondClassify: null,
      info: null,
      goodsClassify: null,
      sortByActive: 0,
      triangleNum: 0,
    }
  },

  head () {
    return {
      title: '一呼百应工业品直卖网_'+this.info.factoryName+'_主营：'+this.categoryNames+'',
      meta: [
        { name: 'keywords', content: '一呼百应,'+this.info.factoryName+','+this.categoryNames+'价格,'+this.categoryNames+'批发' }
      ]
    }
  },

  async asyncData ({ app, query }) {
    let [res1, res2, res3] = await Promise.all([
       app.$axios.get('/factory/frontend/factory/select_one?id='+app.context.params.factoryId),
       app.$axios.get('/product/front/classify/custom_list?factoryId='+app.context.params.factoryId),
       app.$axios.get('/product/front/product_list?factoryId='+app.context.params.factoryId+'&classifyId='+(query.classifyId?query.classifyId:'')+'&size=50&page=1'),
     ])

    //拼接类目
    let categoryNames = ''
    if(res1.data.data.mainCategories.length){
      res1.data.data.mainCategories.forEach(item => {
        categoryNames += item.categoryNames[0] + '/'
      })
    }
     return {
       info: res1.data.data,
       goodsClassify: res2.data.data,
       productList: res3.data.data.list,
       categoryNames: categoryNames != '' ? categoryNames.substring(0, categoryNames.length-1): categoryNames
     }
  },
  created() {

  },
  methods: {
    getList() {
      storeProductList(this.listQuery).then(res=>{
        this.total=res.data.total;
        this.productList=res.data.list;
      })
    },
    //获取自定义分类
    getClassifyList(){
      storeFrontClassifyList({factoryId: this.listQuery.factoryId}).then(res=>{
        if(res.data && res.data.length > 0) {
          this.haveClassify = true;
          this.classifyList = res.data;
          this.defaultClassify = res.data[0].classifyName;
          this.secondClassifyList = res.data[0].children;
          if (res.data[0].children && res.data[0].children.length > 0) {
            this.defaultSecondClassify = res.data[0].children[0].classifyName;
          }
        }
      })
    },
    // 搜索价格
    sortByPrice() {
      this.triangleNum++;
      if (this.triangleNum === 1) {
        this.triangleStatus = 'bottom';
        this.listQuery.fieldSort= 'selling_price';
        this.listQuery.sort = 'ASC';
      } else if (this.triangleNum === 2) {
        this.triangleStatus = 'up';
        this.listQuery.fieldSort= 'selling_price';
        this.listQuery.sort = 'DESC';
      }
      if (this.triangleNum === 3) {
        this.triangleNum = 0;
        this.triangleStatus = '';
        this.listQuery.fieldSort = null;
        this.listQuery.sort = null;
      }
      this.getList();
    },
    //搜索
    sortTab(index) {
      if (this.sortByActive === index) {
        return false;
      }
      this.sortByActive = index;
      if (this.sortByActive !== 3) {
        if (this.sortByActive === 0) {
          this.listQuery.fieldSort = null;
          this.listQuery.sort = null;
        } else if (this.sortByActive === 1) {
          this.listQuery.fieldSort = 'sales_volume';
          this.listQuery.sort = 'DESC';
        } else if (this.sortByActive === 2) {
          this.listQuery.fieldSort = null;
          this.listQuery.sort = null;
        }
        this.getList();
      }
    },
    //一级自定义类目联动
    changeClassify(id){
      this.classifyList.forEach(item=>{
        if (id == item.classifyId) {
          this.secondClassifyList = item.children;
          if (item.children && item.children.length > 0) {
            this.defaultSecondClassify = item.children[0].classifyName;
          } else {
            this.defaultSecondClassify = null;
          }

        }
      });
    }

  }
}
</script>
<style lang="scss" scoped>
.search-list{
  a{
    text-decoration: none;
  }
}
@import '@/styles/pages/productList.scss';
.search-classify-row{
  background: #eee;
}
.grid-right{
  height: 36px;
  overflow: hidden;
  background: #fff;
}
.grid-right.more{
  height: auto;
}
.grid-right .checkbox{
  display: none;
  vertical-align: top;
  margin: 12px 4px 0 0;
  width: 10px;
  height: 10px;
  border: 1px solid #aaa;
  &.show{
    display: inline-block;
  }
}

.classify-kw.active{
  color: red;
  .checkbox{
    border-color: red;
  }
}
.grid-btn{
  overflow: hidden;
  width: 100%;
  text-align: center;
  padding-bottom: 20px;
  a{
    display: inline-block;
    vertical-align: top;
    width: 120px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin: 0 20px;
    color: #fff;
    background: red;
  }
}
</style>
<style lang="scss">
.el-input__inner{
  background: #eee;
  border: none;
  color: #888;
}
.el-input__inner::-webkit-input-placeholder{
  color: #888;
}
.el-select .el-input__inner:focus{
  border: none;
}
.el-select .el-input.is-focus .el-input__inner{
  background: #eee;
  border: none;
}
.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #888;
    border-color: #888;
}
.el-checkbox__input.is-checked+.el-checkbox__label {
    color: #888;
}
.el-checkbox__inner:hover{
  border-color: #888;
}
.el-checkbox__input.is-focus .el-checkbox__inner{
  border-color: #888;
}
</style>
